<template>
<section class="indentWrap_0309">
  <myHeader class="header" :obj="myObj" @events="events"></myHeader>
  <main>
    <div class="marginB_1 subject">
      <div class="faceWrap">
        <i :style="{background:'url('+ myDate.HeadUrl + ') no-repeat center center', backgroundSize:'cover'}"></i>
        <p>{{myDate.Name}}</p>
      </div>
      <div class="fontWrap">
        <h2>{{title}}</h2>
        <h5>{{myDate.Introduce}}</h5>
        <h5>￥ {{money}}</h5>
      </div>
    </div>
    <div class="question_0309">
      <div class="questionTitle_0309">告诉行家要请教的问题（20-300字）<mark class="mark_0309">*</mark></div>
      <textarea class="textArea_0309" placeholder="详细的问题描述有助于行家有效的了解" maxlength="300" v-model="content">

      </textarea>
    </div>
    <!-- <div class="question_0309">
      <div class="questionTitle_0309">介绍一下自己，可备注时间地点喜好（20-300字）<mark class="mark_0309">*</mark></div>
      <textarea class="textArea_0309" placeholder="您填写的信息只有行家能看到，不会公开给其他人" maxlength="200">

      </textarea>
    </div> -->
    <div class="items_0314 marginB_2">
      <label class="itLabels_0314">电话号码</label>
      <input class="itInput_0314" type="text" placeholder="输入数字" maxlength="11" v-model="phone">
      <i class="icons2_0314 noIcon2_0316"></i>
    </div>
    <myButton @sendDate="sendate">提交</myButton>
  </main>
</section>
    
</template>
<script>
import myHeader from './base/myHeader';
import myButton from './base/myButton';
import { axiosPost} from '../assets/api';
import hgjSkip from '../assets/js/hgjSkip';
import API from '../assets/js/asktoses';
import { fetch } from '../assets/api';
import { Toast } from 'mint-ui';
export default {
  props:['obj'],
  data () {
    return {
      myObj: {
        type: 2,
        text: '填写订单'
      },
      loginData:null,
      listDate:{},
      phone:"",
      content:"",
      money:this.$route.query.Money,
      title:"",
      myDate:{}
    }
  },
  created () {
    hgjSkip.skip().then(res =>{
      this.loginData = res;
      this.title = this.b46Decode(this.$route.query.title);
      this.myself();
    })
  },
  methods: {
    events(i) {
      if(i == 2) {
        history.back();
      }
    },
    //转码
    b46Decode(str) {
      return decodeURIComponent(str);
    },
    //提交
    async sendate(){
      if(!(/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.phone))) {
        Toast("电话不对")
      } else {
        const res = await fetch(API.getSubmitAskToSesOrder,{
          ...this.loginData[1],
          PostMesssageDetailId:this.$route.query.PostMesssageDetailId,
          Phone:this.phone,
          Remark:this.content
        });
        this.listDate = res.Result;
        this.$router.push({path:"myApptExpert"});
      }
    },
    //获取行家信息
    async myself(){
      let res = await fetch(API.getexpert,{
        ...this.loginData[1]
      });
      this.myDate = res.Result;
      console.log("ssss",this.myDate)
    },
  },
  components: {
    myHeader,
    myButton,
  }
}

</script>
<style lang="less">
  .indentWrap_0309 {
    width: 3.75rem;
    main {
      width: 3.75rem;
      height: 100%;
      padding-top: .44rem;
      position: absolute;
      top: 0;
      left: 0;
      overflow-y: auto;
      box-sizing: border-box;
      .marginB_2 {
        margin-bottom: .2rem;
      }
      .subject {
        width: 100%;
        padding: .13rem .1rem;
        background: #fff;
        box-sizing: border-box;
        display: flex;
        .faceWrap{
          margin-right: .1rem;
          i{
            height: .6rem;
            width: .6rem;
            border-radius: 50%;
            display: inline-block;
            background-size: cover !important;
          }
          p{
            font-size: .16rem;
            color: #333;
            margin-top: .05rem;
            text-align: center;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:1;
            overflow: hidden;
          }
        }
        .fontWrap{
          h2{
            font-size: .16rem;
            color: #333;
            margin-top: .07rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:1;
            overflow: hidden;
          }
          h5{
            font-size: .14rem;
            color: #B3B3B6;
            margin: .1rem 0 0;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:1;
            overflow: hidden;
          }
        }
      }
      .items_0314 {
        background: white;
        width: 100%;
        height: .44rem;
        padding: 0 .15rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: .01rem solid #E5E5E5;
        &:nth-last-of-type(1) {
          border:none;
        }
        .icons2_0314 {
          display: block;
          width: .2rem;
          height: .2rem;
          background: url('../assets/img/icon_shape@3x.png') center center;
          background-size: cover;
          background-repeat: no-repeat;
        }
        .noIcon2_0316 {
           background: none!important;
        }
        .itInput_0314 {
          width: 2.2rem;
          height: .43rem;
          line-height: .43rem;
          color: #B2B2B2;
          font-size: .17rem;
          border: none;
        }
        .itLabels_0314 {
          display: block;
          width: .9rem;
          height: .44rem;
          line-height: .44rem;
          font-size: .17rem;
          font-weight: 500;
          color: #000;
        }
      }
      .marginB_1 {
        margin-bottom: .1rem;
        margin-top: .1rem;
      }
      .question_0309 {
        width: 100%;
        height: 1.61rem;
        padding-left: .14rem;
        box-sizing: border-box;
        background: white;
        margin-bottom: .1rem;
        .textArea_0309 {
          display: block;
          width: 3.61rem;
          height: 1.06rem;
          border: none;
          padding: 0;
          font-size: .14rem;
          color: #828282;
        }
        .questionTitle_0309 {
          height: .44rem;
          line-height: .44rem;
          font-size: .14rem;
          color: #000000;
          border-bottom: .01rem solid #E5E5E5;
          margin-bottom: .1rem;
          .mark_0309 {
            background: white;
            color: rgb(67, 67, 214);
          }
        }
      }
    }
  }
</style>
